<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>实体泡泡控件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body,
        ul,
        dl,
        dd,
        dt,
        ol,
        li,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        table,
        img,
        td,
        div,
        input {
            margin: 0;
            padding: 0;
        }

        body {
            background: transparent;
            font-family: Microsoft Yahei;
            font-size: 12px;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            outline-style: none;
            color: #545454;
            text-decoration: none;
        }

        a:hover {
            color: #ff8500;
            text-decoration: underline;
            outline: 0;
        }

        .clear {
            clear: both;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .f-l {
            display: inline;
            float: left;
        }

        .f-r {
            display: inline;
            float: right;
        }

        .m-r8 {
            margin-right: 8px;
        }

        .layout-wrapper {
            position: relative;
            width: 372px;
            padding: 1px;
            background: #fff;
            box-shadow: 0 1px 1px 1px rgba(154, 154, 154, .95);
        }

        .arrow-down {
            position: absolute;
            left: 65px;
            bottom: -26px;
            width: 62px;
            height: 28px;
            background: url(/public/images/arrow_down.gif) no-repeat;
        }

        .close-layout {
            position: absolute;
            top: 11px;
            right: 10px;
            z-index: 999;
            display: inline-block;
            width: 9px;
            height: 9px;
            background: url(/public/images/map_icon.png) no-repeat -78px -38px;
            cursor: pointer;
        }

        .layout-box {
            width: 370px;
            border: 1px solid #ccc;
            font-family: SimSun;
        }

        .info-contents {
            margin: 6px 8px;
        }

        .info-tit {
            position: relative;
            z-index: 100;
            margin-bottom: 4px;
            padding-bottom: 8px;
            border-bottom: 1px dashed #d7d7d7;
        }

        .info-detial-tit {
            font-size: 14px;
            font-weight: bold;
            color: #484848;
        }

        .info-detial-tit #Name_h3 {
            display: inline-block;
            max-width: 200px;
            height: 16px;
            overflow: hidden;
        }

        .info-detial-tit a {
            position: relative;
            top: -3px;
            padding-right: 13px;
            color: #1e8ae5;
            font-size: 12px;
            font-weight: normal;
            background: url(/images/link_icon.gif) no-repeat right 3px;
        }

        .user-show-ctrl {
            margin-right: 10px;
        }

        .user-show-ctrl span {
            display: inline-block;
            margin-right: 10px;
        }

        .user-show-ctrl span b,
        .user-show-ctrl span .jiucuo-link {
            display: inline-block;
            background: url(/images/map_icon.png) no-repeat;
            cursor: pointer;
        }

        .user-show-ctrl .sms-fav b {
            width: 14px;
            height: 12px;
            background-position: 0 -20px;
        }

        .user-show-ctrl .sms-share b {
            width: 8px;
            height: 11px;
            background-position: -19px -20px;
        }

        .user-show-ctrl .sms-jiucuo .jiucuo-link {
            width: 12px;
            height: 11px;
            background-position: -32px -21px;
        }

        .user-show-ctrl .has-collection b {
            background-position: 0 -38px;
        }

        .specific-info dt {
            display: inline;
            float: left;
            position: relative;
            width: 108px;
            overflow: hidden;
        }

        .specific-info dt img {
            display: block;
            width: 100px;
            height: 75px;
            padding: 2px;
            border: 1px solid #ddd;
        }

        .specific-info dt p {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-indent: 7px;
            line-height: 19px;
            background: rgba(0, 0, 0, .6);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#90000000, endColorstr=#90000000);
        }

        .specific-info dt p a {
            padding-right: 13px;
            color: #fff;
            background: url(/images/link_icon.gif) no-repeat right -9px;
        }

        .specific-info dd {
            display: inline;
            float: right;
            width: 225px;
            margin-top: 3px;
            color: #4a4a4a;
            line-height: 20px;
        }

        .nav-tab-tit {
            margin-bottom: 7px;
            line-height: 30px;
            background: #f8fbfd;
            border-top: 1px solid #ccc;
        }

        .nav-tab-tit li {
            display: inline;
            float: left;
            width: 122px;
            text-align: center;
            color: #4a4a4a;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .nav-tab-tit li.current {
            background: #fff;
            border-bottom: 1px solid #fff;
        }

        .nav-tab-tit li.from-here,
        .nav-tab-tit .bus-share {
            border-right: 0;
            width: 124px;
        }

        .nav-tab-tit li span {
            position: relative;
            top: 3px;
            *top: 0;
            display: inline-block;
            width: 9px;
            height: 13px;
            margin-right: 7px;
            background: url(/images/map_icon.png) no-repeat;
        }

        .nav-tab-tit .nearby-search span {
            width: 15px;
            height: 15px;
            background-position: -19px -38px;
        }

        .nav-tab-tit .go-here span {
            background-position: -35px -38px;
        }

        .nav-tab-tit .from-here span {
            background-position: -48px -38px;
        }

        .nav-tab-tit .bus-search span {
            width: 11px;
            background-position: 0 -277px;
        }

        .nav-tab-tit .bus-share span {
            background-position: -80px -20px;
        }

        .nav-tab-content {
            padding: 0 8px 8px;
        }

        .search-tags {
            margin-top: 3px;
        }

        .search-tags a {
            margin-right: 11px;
            color: #1e8ae5;
        }

        .search-nearby-ipt {
            float: left;
            height: 22px;
            width: 172px;
            line-height: 22px;
            text-indent: 4px;
            color: #ccc;
            background: #fff;
            border: 1px solid #d6d6d6;
        }

        .search-city-btn {
            float: right;
            width: 54px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #1E1E1E;
            background: #f9fafb;
            border: 1px solid #c7d3da;
            cursor: pointer;
        }

        .ipt-w227 {
            width: 227px;
        }

        .ipt115 {
            width: 115px;
        }

        .union {
            padding: 0 5px;
            height: 100px;
        }

        .share-tool-box {
            position: absolute;
            left: -8px;
            top: 22px;
            z-index: 999;
            display: none;
            width: 370px;
            height: 52px;
            padding-top: 5px;
            background: #f0f0f0;
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }

        .share-where li {
            display: inline;
            float: left;
            margin-left: 5px;
            margin-top: 3px;
        }

        .share-where li a {
            display: inline-block;
            width: 20px;
            height: 16px;
            margin-right: 4px;
            background: url(../images/p_icon_6.png) no-repeat;
        }

        .share-where li .sinaShare {
            background-position: -64px 0;
        }

        .share-where li .qqShare {
            background-position: -42px 0;
        }

        .share-where li .renrenShare {
            background-position: 0 0;
        }

        .share-where li .kaixinShare {
            background-position: -22px 0;
        }
    </style>
</head>

<body>
    <input type="hidden" name="point" id="point" value="{{ lat }},{{ lng }}"/>
    <input type="hidden" name="popupType" id="popupType" value="{{ type }}"/>
    <div class="layout-wrapper">
        <p class="arrow-down"></p>
        <p class="close-layout" id="btnClose"></p>
        <div class="layout-box">
            <div class="info-contents">
                <div class="info-tit clearfix">
                    <p class="f-l info-detial-tit">
                        <span id="Name_h3"> {{ name }} </span>&nbsp;&nbsp;
                    </p>
                </div>
                <dl class="specific-info clearfix">
                    <dt>
                        <a id="Img_a" target="_blank">
                            <img id="Img_img" src="/public/images/nophoto.jpg" />
                        </a>
                    </dt>
                    <dd>
                        <p id="Address_p">地址： {{ address }} </p>
                        <p>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="nav-tab-content clearfix" id="zblist">
                <p class="f-l search-tags">
                    <a href="javascript:;" id="btnHotelSearch">酒店</a>
                    <a href="javascript:;" id="btnFineFoodSearch">美食</a>
                    <a href="javascript:;" id="btnFeatureSpotSearch">景点</a>
                </p>
                <input id="btnRangText" type="text" class="search-nearby-ipt" onclick="if(this.value == '请输入关键字')this.value = '';" value="请输入关键字"/>
                <input type="button" class="search-city-btn" id="btnOtherSearch" value="搜索" />
            </div>
        </div>
    </div>
    <script src="/public/js/jquery.min.js"></script>
    <script type="text/javascript">
    var popupType = $("#popupType").val();
     $('#btnClose').click(function(){
         if(popupType === 'hot'){
             $('#popup', window.parent.document).hide();
         }else if(popupType === 'icon'){
             $('#popup2', window.parent.document).hide();
         }
        
     });

    function searchByKey(keyText){
        if(keyText){
            const location = $("#point").val();
            if(top.searchQuery){
                top.searchQuery(0,keyText,location);
            }
        }
    }
     $('#btnOtherSearch').click(function(){
         $('#btnRangText').click();
         var searchkey = $('#btnRangText').val();
         searchByKey(searchkey);
     });

     $('#zblist p a').click(function(){
        searchByKey($(this).text().trim())
     });
    </script>
</body>

</html>